<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" name="" id="" value="get请求" @click="getInfo"/>
			<input type="button" name="" id="" value="post请求" @click="postInfo"/>
			<input type="button" name="" id="" value="jsonp请求" @click="jsonpInfo"/>
		</div>
		<script type="text/javascript">
			//vue-resource之外，还可以使用‘axios’的第三方包实现数据的请求
			var vm=new Vue({
				el:"#app",
				data:{},
				methods:{
					getInfo(){
						this.$http.get('ajax_info.txt').then(function(result){
							console.log(result.body)
						},function(){
							console.log('请求失败')
						})
					},
					postInfo(){
						this.$http.post('ajax_info.txt',{},{emulateJSON:true}).then(function(result){
							console.log(result.body)
						},
						function(res){
							console.log(res.status)
						})
					},
					jsonpInfo(){
						this.$http.jsonp("ajax_info.txt").then(function(result){
							console.log(result.body)
						},
						function(){
							console.log('请求失败')
						})
					}
				}
			})
		</script>
	</body>
</html>
